<template>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
    </el-button> -->
    <el-avatar shape="square" :size="100" :fit="fit" :src="props.modelValue" @click="drawer = true" >
        <img :src="imgurl"></img>
    </el-avatar>
    <el-drawer v-model="drawer" title="I am the title" direction="ttb" :before-close="handleClose" size="50%">
        <el-upload action="#" v-model:file-list="fileList" list-type="picture-card" :auto-upload="false"
            :on-change="onChange">
            <el-icon>
                <Plus />
            </el-icon>

            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleGetImg(file)">
                            <el-icon>
                                <Check />
                            </el-icon>
                        </span>

                    </span>
                </div>
            </template>
        </el-upload>
    </el-drawer>


    <el-dialog v-model="dialogVisible">
        <img w-full :src="imgurl" alt="Preview Image" width="500" height="400" />
    </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import {UploadApi} from '../api'
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    }
])
const imgurl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const imageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const drawer = ref(false)
const onChange = (uploadFile, uploadFiles) => { 
    console.log(uploadFile);
    console.log(uploadFiles);
    const name = uploadFile.raw.name
    const file = uploadFile.raw
    let reader = new FileReader()
    reader.readAsDataURL(file)
    // console.log(reader);
        
    reader.onload = () => { 
        console.log(reader.result);
        uploadFileApi(name, reader.result)

    }
    

    
}
const handlePictureCardPreview = (file) => {
    imgurl.value = file.url
   
    dialogVisible.value = true
    console.log(dialogVisible.value);

}
// 定义传递的默认类型
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

// 子类发生改变了要通知父类 
const emit = defineEmits(['update:modelValue'])


const handleGetImg = (file) => {
    //点击赋值头像
    imgurl.value = file.url
    emit('update:modelValue', imgurl.value)
    //关闭窗口
    drawer.value = false
    console.log(file.url)
    
}
onMounted(() => { 
    CalluploadApi()
})
// 获取图片的接口
const CalluploadApi = () => { 
    UploadApi.imglist.call().then(res => { 
        console.log(res);
        fileList.value = res
    })
}
//上传图片接口调用
const uploadFileApi = (name, base64) => { 
    UploadApi.upload.call({name, base64}).then(res => { 
        console.log(res);
    })
}
</script>

<style scoped>

</style>